<template>
<el-page-header @click="goback">
    <template #content>
      <span class="text-large font-600 mr-3">评分项目重填</span>
    </template>
  </el-page-header>
  <el-descriptions
    class="margin-top"
    style="
      border-radius: 10px;
      margin: 20px auto;
      width: 73%;
      box-shadow: 5px 5px 10px rgba(51, 126, 204, 0.5);
    "
    :column="3"
    size="large"
    border
  >
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          员工姓名
        </div>
      </template>
      {{ empName }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          所属部门
        </div>
      </template>
      {{ deptName }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets />
          </el-icon>
          岗位
        </div>
      </template>
      {{ position }}
    </el-descriptions-item>
  </el-descriptions>
    <el-table
      :data="tableData"
      border
      style="width: 90%; margin: 20px auto;border-radius: 8px;box-shadow: 5px 5px 10px rgba(51, 126, 204, 0.5);"
      :header-cell-style="{
          'background': '#337ecc !important',
          'color': '#ffffff',
          'border': 'none !important'
        }">
		
		<el-table-column prop="target" label="关键事项描述" width="180" />
		<el-table-column prop="assessorName" label="发布人" width="180" />
		<el-table-column prop="totalScore" label="O分值" width="80" />
		<el-table-column prop="keyResult" label="要求达成的目标" />
		<el-table-column prop="keyWeight" label="考核分数" width="80"/>
		<el-table-column prop="ins" label="考核类型" width="150"/>
		<el-table-column prop="name" label="执行人员姓名" width="180" />
		<el-table-column prop="completionInstructions" label="完成情况说明" width="180" />
		<el-table-column prop="amount1" label="评分" width="230">
        <template v-slot="scope">
            <el-input style="width:150px;" :ref="'inputFocus' + scope.$index" v-model="Form[scope.$index].score" placeholder="请填写评分（0~100）" class="input" />分
        </template>
      </el-table-column>
	  <el-table-column prop="amount2" label="评分说明">
	  	<template v-slot="scope">
	        <el-input
	  		:ref="'inputFocus' + scope.$index"
	          v-model="Form[scope.$index].remark"
	          type="textarea"
	          placeholder="请填写扣分或加分说明"
	          style="width: 100%; float: right"
	        />
	  	  </template>
	  </el-table-column>
    </el-table>
	
	
	<div style="width: 100%;">
	    <div class="opinion" style="width:20%;color: #9d9d9d;margin-bottom:8px;float: right; margin-right: 10%;">
	        <div style="width:100%;color: #9d9d9d;margin-bottom:8px">
	            <el-icon><ChatLineSquare/></el-icon>
	            Tip
	        </div>
	        <span style="color:#F56C6C">
	            审核意见：</span>{{ Opinion }}
	    </div>
	    
	    <div style="width: 100%; clear: both;">
	        <el-button
	            type="primary"
	            @click="submitForm"
	            class="button"
	        >重填提交</el-button>
	    </div>
	</div>
</template>

<script setup>
import {ref, onBeforeMount, reactive,getCurrentInstance} from "vue";
import {getEmpPositionOkr}from '@/api/okr'
import {reBackAdd} from '@/api/empOkr'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import { getOpinion } from "@/api/backWait";

const route = useRoute();
let empId=route.query.empId;
let deptName=route.query.deptName;
let empName=route.query.empName;
let positionId=route.query.positionId;
let position=route.query.position;
let type=route.query.type 

const Form = reactive([])
const tableData=ref([])
const Opinion = ref([]);
onBeforeMount(()=>{
  let assessorId=JSON.parse(localStorage.getItem('userInfo')).id;
let empId=route.query.empId;
let positionId = route.query.positionId;
  let positionType=route.query.type
    getEmpPositionOkr({assessorId,empId,positionId,positionType})
    .then(data=>{
        tableData.value=data.data;
        for(let i=0;i<tableData.value.length;i++){
          Form.push({
            empId:route.query.empId,
            okrKeyId:tableData.value[i].keyId,
            score:''
          })
        }
    });
    let type="okr"
  getOpinion({ empId, positionId,type }).then((data) => {
    Opinion.value = data.data.opinion;
  });
})

const { proxy } = getCurrentInstance();
const goback=()=>{
  proxy.$router.go(-1)
}

const submitForm=()=>{
  let assessorId=JSON.parse(localStorage.getItem('userInfo')).id;
  let empId=route.query.empId;
  let positionId = route.query.positionId;
  let positionType=route.query.type
  reBackAdd({Form,empId,assessorId,positionId,positionType})
  .then(data=>{
    if(data.code==200){
      ElMessage({
        message: '提交成功',
        type: 'success',
      })
      goback()
    }
  })
}
</script>
<style lang="scss" scoped>
:deep(.my-label) {
  background: rgba(51, 126, 204, 0.2) !important;
  color: rgb(51, 126, 204) !important;
  border: #337ecc 2px solid !important ;
}
:deep(.my-content) {
  color: #fff !important;
  background: rgba(51, 126, 204, 0.9) !important;
  border: #337ecc 2px solid !important ;
}
.button {
  width: 120px;
  height: 40px;
  margin: 10px 130px;
  float: right;
}
.opinion {
  width: 73%;
  height: 100%;
  border-radius: 8px;
  color: #363636;
  display: inline-block;
  border: #363636 2px dashed;
  background: #fff;
  margin: 10px auto;
  padding: 10px;
}
</style>
